<template>
	<div class="content">
		<el-form ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 650px">
			<el-row gutter="10">
				<el-col span="12">
					<el-form-item label="活动名称" prop="name">
					  <el-input v-model="form.name"  autofocus/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="活动类型" prop="type">
					  <el-select v-model="form.type" style="width: 200px;">
              <el-option v-for="item in activity_type" :value="item.dataValue" :label="item.dataName"></el-option>
            </el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row  gutter="10">
				<el-col  span="12">
					<el-form-item label="活动状态" prop="status">
					  <el-switch v-model="form.status" active-value="1" inactive-value="0" />
					</el-form-item>
				</el-col>
			</el-row>
      <el-row  gutter="10">
        <el-col  span="12">
          <el-form-item label="优惠券使用范围" prop="couponUsageScope" v-if="form.type == '2'">
            <el-radio-group v-model="form.couponUsageScope">
              <el-radio value="0" label="全部"></el-radio>
              <el-radio value="1" label="指定菜单"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col  span="12">
          <el-form-item  label="菜单" prop="menuIds" v-if="form.type == '2' && form.couponUsageScope == '1'">
            <el-select multiple  style="width: 200px;" v-model="form.menuIds">
              <el-option  v-for="item in menus" :value="item.id" :label="item.menuName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row  gutter="10" v-if="form.type == '2'">
        <el-col :span="12">
          <el-form-item label="优惠券开始时间" prop="couponStartTime" >
            <el-date-picker v-model="form.couponStartTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券结束时间" prop="couponEndTime">
            <el-date-picker v-model="form.couponEndTime"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="拼团人数" prop="groupBuyingPersons" v-if="form.type == '3'">
        <el-input v-model="form.groupBuyingPersons" type="number"></el-input>
      </el-form-item>
      <el-form-item label="折扣" prop="discount" v-if="form.type != '1'">
        <el-input v-model="form.discount" type="number" min="0" max="10"></el-input>
      </el-form-item>
      <el-row gutter="10"  v-if="form.type == '1'">
        <el-col  span="12">
          <el-form-item label="订单产生积分值" prop="orderAddPoints">
            <el-input v-model="form.orderAddPoints" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col  span="12">
          <el-form-item label="订单消耗积分值" prop="orderSubPoints">
            <el-input v-model="form.orderSubPoints" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="每积金额(元)" prop="pointsMoney"   v-if="form.type == '1'">
        <el-input v-model="form.pointsMoney" type="number"></el-input>
      </el-form-item>
			<el-form-item label="活动内容" prop="content">
        <el-input type="textarea" v-model="form.content"></el-input>
			</el-form-item>
		    <el-form-item style="margin-top:40px;">
				<el-button style="margin-left:180px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
				<el-button style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
				<el-button type="info"  @click="close" >取消</el-button>
		    </el-form-item>
		</el-form>
	</div>
	
</template>

<script lang="ts" setup>
	import { reactive,ref, defineProps,toRefs,watchEffect,onMounted} from 'vue'
	import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
	import {info,update,save} from '@/api/dineinordering/activity.ts'
	import {list} from '@/api/dineinordering/appmenu.ts'
  import {useUserStore} from "@/stores/user.ts";
  const userStore = useUserStore()
	const activity_type=userStore.getDictData('activity_type');
	const emit = defineEmits(['closeSaveDeptForm','success'])
	const props = defineProps(['deptId','parentId','t'])

  onMounted(()=>{
    getMenuList()
  })
  const menus = ref([])
  const getMenuList = ()=>{
    list().then(res=>{
      menus.value=res.data
    })
  }
  interface RuleForm {
	  id:any,
    name:string,
	  type:string,
	  content:string,
	  contentHtml:string,
	  status:string,
    discount:number,
    orderSubPoints:number,
    orderAddPoints:number,
    couponUsageScope:string,
    couponStartTime:any,
    couponEndTime:any,
    menuIds:Array<number>,
    groupBuyingPersons:number,
    pointsMoney:number
	}
	const ruleFormRef = ref<FormInstance>()
  const form = reactive<RuleForm>({
	  id:null,
    name:'',
    type:'',
    content:'',
    contentHtml:'',
    status:'1',
    discount:0,
    orderSubPoints:0,
    orderAddPoints:0,
    couponUsageScope:'0',
    couponStartTime:null,
    couponEndTime:null,
    menuIds:[],
    groupBuyingPersons:0,
    pointsMoney:0
	})
	

	watchEffect(()=>{
		const t = props.t
	    console.log("t",t,props.deptId)
		if(props.deptId){
			info(props.deptId).then((res)=>{
				if(res.code === 200){
					form.id=res.data.id
					form.name=res.data.name
					form.type=res.data.type
					form.content=res.data.content
					form.contentHtml=res.data.contentHtml
					form.status=res.data.status
          form.discount=res.data.discount
          form.orderSubPoints=res.data.orderSubPoints
          form.orderAddPoints=res.data.orderAddPoints
          form.couponUsageScope=res.data.couponUsageScope
          form.couponStartTime=res.data.couponStartTime
          form.couponEndTime=res.data.couponEndTime
          form.menuIds=res.data.menuIds
          form.groupBuyingPersons=res.data.groupBuyingPersons
          form.pointsMoney=res.data.pointsMoney
				}
			})
		}else{
      form.id=null
      form.name=''
      form.type=''
      form.content=''
      form.contentHtml=''
      form.status='1'
      form.discount=0
      form.orderSubPoints=0
      form.orderAddPoints=0
      form.couponUsageScope='0'
      form.couponStartTime=null
      form.couponEndTime=null
      form.menuIds=[]
      form.pointsMoney=0
    }
	})
	
	const rules = reactive<FormRules<RuleForm>>({
    name:[{required:true,message:'活动名称不能为空',trigger:'blur'}],
		type:[{required:true,message:'类型不能为空',trigger:'blur'}],
		content:[{required:true,message:'内容不能为空',trigger:'blur'}],
	})
	
	
	const onSubmit =  (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.validate(async(valid, fields) => {
	    if (valid) {
	      console.log('submit!')
		  const code2 = ref();
		  if(form.id != null){
			  const {code} = await update(form);
			  code2.value=code
		  }else{
			  const {code} = await save(form);
			  code2.value=code
		  }
		  if(code2.value === 200){
			  ElMessage({
				  type:'success',
				  message:'保存成功'
			  })
        resetForm(ruleFormRef.value)
			  emit('success')
		  }
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.resetFields()
	}
	const close = ()=>{
		if(!props.deptId){
			  resetForm(ruleFormRef.value)
		}
		emit('closeSaveDeptForm')
	}
</script>

<style scoped>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.userInfoContent{
		/* background-color: red; */
	}
</style>